<template>
    <Page>
        <div class="total-show">
            <div class="ts-item">
                <div class="ts-item-col">
                    <div class="tic-title">发放总量</div>
                    <div class="tic-value">
                        {{summary.totalNum}}<span>张</span>
                    </div>
                </div>
                <div class="ts-item-col">
                    <div class="tic-title">发放金额</div>
                    <div class="tic-value">
                        {{summary.totalAmount}}<span>元</span>
                    </div>
                </div>
                <div class="ts-item-col">
                    <div class="tic-title">已领取</div>
                    <div class="tic-value">
                        {{summary.getNum}}<span>张</span>
                    </div>
                </div>
                <div class="ts-item-col">
                    <div class="tic-title">已领电票金额</div>
                    <div class="tic-value">
                        {{summary.getAmount}}<span>元</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="search">
            <el-form :inline="true" :model="params" class="demo-form-inline">
                <el-form-item label="日期">
                    <el-date-picker
                        v-model="dateTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="changeDate"
                        :picker-options="dateOption"
                        style="width:250px;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="经销商">
                    <el-input v-model="params.searchKey" size="small" placeholder="请输入经销商"></el-input>
                    <!--<el-autocomplete
                        class="inline-input"
                        v-model="params.searchKey"
                        label="请输入经销商"
                        value-key="mchName"
                        :fetch-suggestions="queryMerchant"
                        placeholder="请输入经销商"
                        @select="selectComplate"
                        size="small"
                    ></el-autocomplete>-->
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="searchData">查询</el-button>
                    <el-button type="primary" size="small" @click="resetSearch" plain>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="datalist">
            <div class="table-header"></div>
            <div class="table-list">
                <el-table
                    :data="listData.list"
                    stripe
                    style="width:100%"
                    width="100%"
                    :highlight-current-row="false"
                    size="small"
                    :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px'}"
                >
                    <el-table-column prop="gettime" label="时间" align="center"></el-table-column>
                    <el-table-column prop="userInfo" label="用户信息" align="center"></el-table-column>
                    <el-table-column prop="mchName" label="经销商" align="center"></el-table-column>
                    <el-table-column prop="amount" label="电票领取明细" align="center"></el-table-column>
                </el-table>
                <div class="list-paginate">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="params.currPage"
                        :page-size="params.pageSize"
                        :total="listData.totalCount"
                        @current-change="changePage"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </Page>
</template>

<script>
import Page from "@/components/page/Page";
export default {
    data(){
        return {
            params:{
                searchKey:null,
                dateBegin:null,
                dateEnd:null,
                currPage:1,
                pageSize:15,
            },
            listData:{
                currPage: 0,
                list: [],
                pageSize: 0,
                totalCount: 0,
                totalPage: 0,
            },
            summary:{
                getAmount:0,    //电票派发数量
                getNum:0,       //电票派发金额
                totalAmount:0,  //电票领取数量
                totalNum:0,     //电票领取金额
            },
            dateTime:[],
            dateOption:{
                shortcuts: [{
                    text: '昨天',
                    onClick(picker){
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        console.log(picker);
                        picker.$emit('pick', [date, date]);
                    },
                }, {
                    text: '近七天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近30天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近90天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        }
    },
    created() {
        this.getSummary();
    },
    mounted() {
        this.initData();
    },
    methods:{
        // 初始化数据
        initData(){
            this.$http.get('/api/eticket/getList', {params:this.params}).then(result => {
                if(result.code == 200){
                    this.listData = result.data;
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 获取统计数据
        getSummary(){
            this.$http.get('/api/eticket/summary', {}).then(result => {
                if(result.code == 200){
                    this.summary = result.data;
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 日期
        changeDate(e){
            this.dataTime = e;
            const [dateBegin, dateEnd] = e;
            this.params.dateBegin = dateBegin;
            this.params.dateEnd = dateEnd;
        },
        // 查询数据
        searchData(e){
            this.params.currPage = 1;
            this.initData();
        },
        // 重置查询
        resetSearch(){
            ['searchKey','dateBegin','dateEnd'].forEach((item, index) => {
                this.params[item] = null;
            });
            this.dateTime = [];
            this.searchData();
        },
        // 点击分页
        changePage(e){
            this.params.currPage = e;
            this.initData();
        }
    },
    components:{
        Page
    }
}
</script>

<style lang="less" scoped>
.total-show{
    .ts-item{
        border:0px solid #f00;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        margin-bottom:10px;
        .ts-item-col{
            width:25%;
            margin:0px 1%;
            height:80px;
            border-radius:10px;
            background-color:#fff;
            box-shadow:0px 0px 5px 5px #eee;
            padding:10px 15px;
            .tic-title{
                font-size:16px;
                height:30px;
            }
            .tic-value{
                height:40px;
                line-height:40px;
                font-size:30px;
                text-indent: 1em;
                span{
                    font-size:16px;
                    margin-left:5px;
                }
            }
        }
    }
}
</style>
